CSS两栏布局和三栏布局
chenpeng 2020-05-01 CSS
# 两栏布局
html 结构
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
1
2
3
4
2
3
4
# float 实现
.left{
float: left;
width: 200px;
height: 100vh;
background-color: red;
}
.right{
height: 100vh;
background-color: blueviolet;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# position 实现
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100vh;
background-color: red;
}
.right{
height: 100vh;
background-color: blueviolet;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# table 布局实现
.wrap{
display: table;
width: 100%;
}
.left{
display: table-cell;
width: 200px;
height: 100vh;
background-color: red;
}
.right{
display: table-cell;
height: 100vh;
background-color: blueviolet;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# flex 布局实现
.wrap{
display: flex;
}
.left{
width: 200px;
height: 100vh;
background-color: red;
}
.right{
flex: 1;
height: 100vh;
background-color: blueviolet;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 三栏布局
html 结构
<div class="wrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
1
2
3
4
5
2
3
4
5
# float 实现
html 结构
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
1
2
3
4
5
2
3
4
5
.left, .right{
width: 200px;
height: 100vh;
}
.left{
float: left;
background-color: red;
}
.right{
float: right;
background-color: green;
}
.center{
height: 100vh;
margin-left: 200px;
margin-right: 200px;
background-color: blueviolet;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# position 实现
.wrap{
position: relative;
}
.left, .right{
width: 200px;
height: 100vh;
position: absolute;
}
.left{
top: 0;
left: 0;
background-color: red;
}
.right{
top: 0;
right: 0;
background-color: green;
}
.center{
height: 100vh;
margin-left: 200px;
margin-right: 200px;
background-color: blueviolet;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# table 布局实现
.wrap{
width: 100%;
display: table;
}
.left, .right{
width: 200px;
height: 100vh;
display: table-cell;
}
.left{
background-color: red;
}
.right{
background-color: green;
}
.center{
display: table-cell;
height: 100vh;
background-color: blueviolet;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# flex 布局实现
.wrap{
display: flex;
}
.left, .right{
width: 200px;
height: 100vh;
}
.left{
background-color: red;
}
.right{
background-color: green;
}
.center{
flex: 1;
height: 100vh;
background-color: blueviolet;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# grid 布局实现
.wrap{
width: 100%;
display: grid;
grid-template-rows: 100vh;
grid-template-columns: 200px auto 200px;
}
.left{
background-color: red;
}
.center{
background-color: blueviolet;
}
.right{
background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15